<template>
    <div class="my-wrapper">
        <!-- <open-data type="userNickName" open-gid="xxxxxx"></open-data>
        <open-data type="userAvatarUrl"></open-data> -->
        <div class="banner">
            <img src="/static/images/banner.jpg" alt="">
            <div class="header-img">
                <open-data type="userAvatarUrl" class="user-avatar"></open-data>
                <open-data type="userNickName" class="user-name" open-gid="xxxxxx"></open-data>
                <!-- <img :src="userInfo.avatarUrl" alt="" @click="login">
                <span>{{userInfo.nickName}}</span> -->
                <a href="../setting/main"><i class="iconfont">&#xe637;</i></a>
            </div>
        </div>
        <div class="my-order">
            <div class="title">
                <span>我的订单</span>
                <a href="../ordermore/main">查看更多 ></a>
            </div>
            <ul class="list">
                <li>
                    <a href="../waitpayfor/main?choice=1">
                        <div class="icon icon1">
                            <i class="iconfont">&#xe607;</i>
                        </div>
                        <span>待付款</span>
                    </a>
                </li>
                <li>
                    <a href="../waitpayfor/main?choice=2">
                        <div class="icon icon2">
                            <i class="iconfont">&#xe618;</i>
                        </div>
                        <span>待发货</span>
                    </a>
                </li>
                <li>
                    <a href="../waitpayfor/main?choice=3">
                        <div class="icon icon3">
                            <i class="iconfont">&#xe675;</i>
                        </div>
                        <span>待收货</span>
                    </a>
                </li>
                <li>
                    <a href="../waitpayfor/main?choice=5">
                        <div class="icon icon4">
                            <i class="iconfont">&#xe611;</i>
                        </div>
                        <span>退款</span>
                    </a>
                </li>
            </ul>
        </div>
        <ul class="list2">
            <li>
                <span>我的邀请码</span>
                <div class="right">
                    <span>56895432</span>
                </div>
            </li>
            <li>
                <span>业务员</span>
                <div class="right">
                    <span>156****8932</span>
                </div>
            </li>
            <li>
                <span>手机号码</span>
                <!-- <div class="right">
                    <span>156****8932</span>
                </div> -->
                <div class="right right2">
                    <a href="../bindingTel/main">绑定手机号</a>
                </div>
            </li>
            <li>
                <span>收货地址</span>
                <div class="right">
                    <span>市中区XX路XX大厦</span>
                </div>
            </li>
        </ul>
        <div class="my-juan">
            <div class="box box1">
                <span>我的积分</span>
                <i>55555</i>
            </div>
            <div class="box box2">
                <span>我的优惠券</span>
                <i>5张</i>
            </div>
        </div>
        <div class="my-juan2">
            <div class="left">
                <img src="/static/images/my-img1.png" alt="">
                <p>如何获取积分</p>
            </div>
            <div class="left right">
                <img src="/static/images/my-img2.png" alt="">
                <p>如何获取优惠券</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      userInfo: {
        avatarUrl: '',
        nickName: ''
      }
    }
  },
  onShow () {
    this.userInfo = wx.getStorageSync('userInfo')
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.my-wrapper{
    background: #f4f4f4;
    color: #333;
    .banner{
        width: 750rpx;
        height: 235rpx;
        overflow: hidden;
        position: relative;
        img{
            width: 100%;
            height: 100%;
        }
        .header-img{
            position: absolute;
            z-index: 100;
            top: 55rpx;
            left: 27rpx;
            color: #fff;
            width: 750rpx;
            display:flex;
            .user-avatar{
                width: 138rpx;
                height: 138rpx;
                border-radius: 50%;
                overflow: hidden;
            }
            .user-name{
                line-height: 138rpx;
                margin-left: 40rpx;
            }
            a{
                position: absolute;
                right: 47rpx;
                top: 45rpx;
                padding: 10rpx;
            }
        }
    }
    .my-order{
        background: #fff;
        padding: 0 30rpx;
        .title{
            display: flex;
            justify-content: space-between;
            font-size: 30rpx;
            height: 90rpx;
            line-height: 90rpx;
            border-bottom: 1rpx solid #f4f4f4;
            a{
                color: #888;
            }
        }
         .list{
            display: flex;
            li{
                flex: 1;
                text-align: center;
                padding: 20rpx 0;
                a{
                    .icon{
                        width: 90rpx;
                        height: 90rpx;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 90rpx;
                        color: #fff;
                        margin: 0 auto;
                    }
                    .icon1{
                        background: #ffb644;
                        font-size: 40rpx;
                    }
                    .icon2{
                        background: #6fbfe2;
                        font-size:60rpx;
                    }
                    .icon3{
                        background: #6ddf89;
                        font-size: 50rpx;
                    }
                    .icon4{
                        background: #ff7183;
                        font-size: 50rpx;
                    }
                    span{
                        font-size: 24rpx;
                        color: #666;
                        margin-top: 10rpx;
                    }
                }
            }
        }
    }
    .list2{
        background: #fff;
        padding: 0 30rpx;
        font-size: 28rpx;
        margin-top: 10rpx;
        li{
            display: flex;
            justify-content: space-between;
            padding: 10rpx 0;
            border-bottom: 1rpx solid #eee;
            span{
                line-height: 90rpx;
            }
            .right{
                display: flex;
                align-items: center;
                img{
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                }
                i{
                    margin-left: 10rpx;
                }
                span{
                    color: #999;
                }
                .picker-wrapper{
                   margin-top: 20rpx;
                   margin-right: 40rpx;
                }
                .detail-addr{
                    margin-top: 20rpx;
                    text-align: right;
                }
               
            }
            .right2{
                a{
                    color: #c74444;
                }
            }
        }
    }
    .my-juan{
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        background: #fff;
        line-height: 60rpx;
        padding: 15rpx 30rpx;
        margin-top: 14rpx;
        .box{
            display: flex;
            justify-content: space-between;
            width: 50%;
            i{
                color: #999;
            }
        }
        .box1{
            border-right: 1rpx solid #eee;
            padding-right: 30rpx;
        }
        .box2{
            padding-left: 30rpx;
        }
    }
    .my-juan2{
        display: flex;
        justify-content: space-around;
        background: #fff;
        text-align: center;
        font-size: 26rpx;
        color: #c74444;
        margin:4rpx 0 14rpx 0;
        padding: 20rpx 0;
        .left{
            width: 50%;
            // border-right: 1rpx solid #eee;
            img{
                width: 242rpx;
                height: 136rpx;
            }
            p{
                margin-top: 20rpx;
            }
        }
        .right{
            border-left: 1rpx solid #eee;
        }
    }
}
</style>
